<template>
	<view class="refund-detail-container">
		<!-- 加载中蒙版 -->
		<qmy-mask-load :dataLoaded="dataLoaded"></qmy-mask-load>

		<!-- 顶部导航栏 -->
		<qmy-custom-navbar title="退款详情"></qmy-custom-navbar>

		<!-- 退款详情内容 -->
		<view class="refund-content" :style="{paddingTop: menuObject.top + menuObject.height + 20 + 'px'}"
			v-if="refundInfo">
			<!-- 退款状态 -->
			<view class="status-card">
				<view class="status-header">
					<text class="status-text">{{getStatusText(refundInfo.status)}}</text>
					<text class="status-desc">{{getStatusDesc(refundInfo.status)}}</text>
				</view>
				<view class="refund-amount">
					<text class="amount-label">退款金额：</text>
					<text class="price-symbol">¥</text>
					<text class="price-value">{{(refundInfo.total_fee/100).toFixed(2)}}</text>
				</view>
			</view>

			<!-- 退款信息 -->
			<view class="info-card">
				<view class="info-item">
					<text class="info-label">退款原因</text>
					<text class="info-value">{{refundInfo.refund_list[0].reason}}</text>
				</view>
				<view class="info-item" v-if="refundInfo.refund_list[0].remark">
					<text class="info-label">退款说明</text>
					<text class="info-value">{{refundInfo.refund_list[0].remark}}</text>
				</view>
				<view class="info-item"
					v-if="refundInfo.refund_list[0].images && refundInfo.refund_list[0].images.length">
					<text class="info-label">退款凭证</text>
					<view class="image-list">
						<image v-for="(img, index) in refundInfo.refund_list[0].images" :key="index" :src="img.url"
							mode="aspectFill"></image>
					</view>
				</view>
				<view v-if="refundInfo.refund_list[0].time" class="info-item">
					<text class="info-label">申请时间</text>
					<text class="info-value">{{formatDate(refundInfo.refund_list[0].time)}}</text>
				</view>
				<view class="info-item" v-if="[2,3].includes(refundInfo.status)">
					<text class="info-label">处理时间</text>
					<text class="info-value">{{formatDate(refundInfo.cancel_date)}}</text>
				</view>
			</view>

			<!-- 商品信息 -->
			<view class="goods-card">
				<view class="card-title">退款商品</view>
				<view class="goods-item" v-for="(goods, index) in refundInfo.custom.goods_list" :key="index">
					<image class="goods-image" :src="goods.image" mode="aspectFill"></image>
					<view class="goods-detail">
						<text class="goods-name text-element-2">{{goods.name}}</text>
						<view class="goods-price">
							<view>
								<text class="price-symbol">¥</text>
								<text class="price-value">{{(goods.price/100).toFixed(2)}}</text>
							</view>
							<text class="goods-quantity">x{{goods.quantity || 1}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-button" v-if="refundInfo && refundInfo.status === 0">
			<view class="cancel-button" @click="showCancelPopup">取消退款</view>
		</view>

		<!-- 取消退款确认弹窗 -->
		<uni-popup ref="cancelPopup" type="dialog">
			<uni-popup-dialog type="warning" title="取消退款" content="确定要取消退款申请吗？" :before-close="true"
				@confirm="confirmCancel" @close="closeCancelPopup">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// #ifdef MP-WEIXIN
				menuObject: uni.getMenuButtonBoundingClientRect(),
				// #endif
				// #ifndef MP-WEIXIN
				menuObject: 0,
				// #endif
				dataLoaded: false,
				refundInfo: null,
				orderId: ''
			}
		},
		onLoad(options) {
			if (options.id) {
				this.orderId = options.id;
				this.loadRefundDetail();
			}
		},
		methods: {
			// 加载退款详情
			async loadRefundDetail() {
				this.$Route('get-private-data', !this.dataLoaded).getRefundDetail(this.orderId).then(res => {
					this.refundInfo = res.data;
					this.dataLoaded = true;
				}).catch(err => {
					console.error('遇到错误:', err);
					let {
						code,
						msg
					} = this.$parseError(err);
					this.$Toast(msg);
					setTimeout(() => {
						if (code === 401) {
							this.$NavigateTo('/qmy_user/login');
						}
					}, 1000);
				});
			},

			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					'-1': '已关闭',
					0: '未支付',
					1: '已支付',
					2: '已部分退款',
					3: '已全部退款',
					4: '退款处理中',
					5: '已发货',
					6: '订单已完成',
					7: '已评价'
				};
				return statusMap[status] || '未知状态';
			},

			// 获取状态描述
			getStatusDesc(status) {
				const descMap = {
					0: '商家正在处理您的退款申请',
					1: '退款申请未通过，如有疑问请联系客服',
					2: '退款已完成'
				};
				return descMap[status] || '';
			},

			// 格式化日期
			formatDate(timestamp) {
				const date = new Date(timestamp);
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
			},

			// 显示取消退款弹窗
			showCancelPopup() {
				this.$refs.cancelPopup.open();
			},

			// 关闭取消退款弹窗
			closeCancelPopup() {
				this.$refs.cancelPopup.close();
			},

			// 确认取消退款
			async confirmCancel() {
				// 节流
				this.$debounce(() => {
					this.$Route('update-private-data').cancelRefund(this.orderId).then(res => {
						this.$Toast(res.msg);
						setTimeout(() => {
							this.loadRefundDetail();
						}, 1000);
					}).catch(err => {
						console.error('遇到错误:', err); // 打印错误信息
						let {
							code,
							msg
						} = this.$parseError(err); // 调用公共解析方法
						setTimeout(() => {
							if (code === 401) {
								this.$NavigateTo('/qmy_user/login'); // 跳转到登录页面
							}
						}, 1000);
						this.$Toast(msg);
					}).finally(() => {
						this.closeCancelPopup();
					});
				}, 1000, true, "cancelRefund");
			}
		}
	}
</script>

<style lang="scss">
	.refund-detail-container {
		min-height: 100vh;
		background-color: #f7f7f7;
		padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
	}

	.refund-content {
		padding: 20rpx;
	}

	.status-card {
		background-color: #14cc60;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		color: #fff;
		margin-bottom: 20rpx;

		.status-header {
			margin-bottom: 30rpx;

			.status-text {
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
				display: block;
			}

			.status-desc {
				font-size: 26rpx;
				opacity: 0.9;
			}
		}

		.refund-amount {
			display: flex;
			align-items: baseline;

			.amount-label {
				font-size: 28rpx;
			}

			.price-symbol {
				font-size: 28rpx;
				margin-right: 4rpx;
			}

			.price-value {
				font-size: 40rpx;
				font-weight: bold;
			}
		}
	}

	.info-card,
	.goods-card {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
	}

	.info-item {
		margin-bottom: 24rpx;

		&:last-child {
			margin-bottom: 0;
		}

		.info-label {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 12rpx;
			display: block;
		}

		.info-value {
			font-size: 28rpx;
			color: #333;
			line-height: 1.5;
		}
	}

	.image-list {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -10rpx;

		image {
			width: 160rpx;
			height: 160rpx;
			margin: 10rpx;
			border-radius: 12rpx;
			background-color: #f5f5f5;
		}
	}

	.card-title {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 24rpx;
	}

	.goods-item {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #f5f5f5;

		&:last-child {
			border-bottom: none;
		}

		.goods-image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 12rpx;
			background-color: #f5f5f5;
			margin-right: 20rpx;
		}

		.goods-detail {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.goods-name {
				font-size: 28rpx;
				color: #333;
				line-height: 1.4;
			}

			.goods-price {
				display: flex;
				align-items: baseline;
				justify-content: space-between;

				.price-symbol {
					font-size: 24rpx;
					color: #ff4f4f;
				}

				.price-value {
					font-size: 32rpx;
					color: #ff4f4f;
					font-weight: bold;
				}

				.goods-quantity {
					font-size: 28rpx;
					color: #999;
					margin-left: 12rpx;
				}
			}
		}
	}

	.text-element-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.bottom-button {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 20rpx;
		background-color: #fff;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

		.cancel-button {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: #fff;
			color: #666;
			font-size: 28rpx;
			border-radius: 40rpx;
			border: 2rpx solid #ddd;

			&:active {
				background-color: #f5f5f5;
			}
		}
	}
</style>